<template>
  <section class="warp">
    <el-card class="card-warp">
      <p class="title">用户登录</p>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model.trim="ruleForm.username"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model.trim="ruleForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item
          v-if="count > 5 || showCaptcha"
          label="验证码"
          prop="captcha"
        >
          <el-row :gutter="15">
            <el-col :span="14">
              <el-input
                v-model.trim="ruleForm.captcha"
                placeholder="请输入验证码"
              />
            </el-col>
            <el-col :span="10" style="height: 32px"
              ><img class="captcha-img" :src="imgSrc" @click="getCaptchaImg"
            /></el-col>
          </el-row>
        </el-form-item>
        <el-checkbox
          v-model="checkboxVal"
          class="check-box"
          label="记住密码"
          size="small"
        />
        <el-button
          class="login-btn"
          type="primary"
          @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
      </el-form>
    </el-card>
  </section>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';
import MD5 from 'md5';
import { login, getCaptcha } from '@/api/login';
import { useUserStore } from '@/store/user';
import Storage from '@/utils/storage';
import { GUID } from '@/utils/utils';
import verifyInput from '@/utils/verifyInput';

const { proxy } = getCurrentInstance();
const uuid = GUID();
const userStore = useUserStore();
const ruleFormRef = ref();
const checkboxVal = ref(false);
const count = ref(1);
const imgSrc = ref(null);
const ruleForm = reactive({
  username: '',
  password: '',
  captcha: '',
});

const userStr = Storage.get('USER_NAME');
if (userStr) {
  const user = JSON.stringify(userStr);
  ruleForm.username = user.username;
  ruleForm.password = user.password;
  checkboxVal.value = true;
}

const rules = {
  username: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: verifyInput.isPhone,
      message: '请输入正确的手机号',
      trigger: ['blur'],
    },
  ],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};

const showCaptcha = ref(false);
const getCaptchaImg = () => {
  getCaptcha({ uuid }).then((res) => {
    // console.log( res );
    const blob = new Blob([res], { type: 'image/png' });
    imgSrc.value = URL.createObjectURL(blob);
  });
};
getCaptchaImg();

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // const data = {
      //   username: ruleForm.username,
      //   password: MD5(ruleForm.password),
      //   // productCode: 'fMbXZFlfqh',
      //   productCode: 10003,
      //   supplement: 'aaa:bbb:ccc:ddd',
      //   captcha: ruleForm.captcha,
      //   uuid,
      // };
      // login(data).then((res) => {
      //   if (res.status) {
      //     proxy.$message.success('登录成功');
      //     count.value = 1;
      //     userStore.SET_TOKEN(res.data.access_token);
      //     userStore.SET_USER(res.data);
      //     rememberPassword();
      //     const path = proxy.$route.query?.redirect ?? '/user';
      //     proxy.$router.push({ path, replace: true });
      //     showCaptcha.value = false;
      //   } else if (res.code === '800010') {
      //     getCaptchaImg();
      //     showCaptcha.value = true;
      //   } else {
      //     count.value++;
      //     getCaptchaImg();
      //   }
      // });
      const path = proxy.$route.query?.redirect ?? '/test1';
      proxy.$router.push({ path, replace: true });
    }
  });
};

const rememberPassword = () => {
  if (!checkboxVal.value) {
    Storage.remove('USER_NAME');
    return;
  }
  Storage.set('USER_NAME', {
    username: ruleForm.username,
    password: ruleForm.password,
    remember: checkboxVal.value,
  });
};
const initPassword = () => {
  const USER_NAME = Storage.get('USER_NAME');
  if (USER_NAME) {
    ruleForm.username = USER_NAME.username;
    ruleForm.password = USER_NAME.password;
    checkboxVal.value = USER_NAME.remember;
  }
};
initPassword();
</script>

<style lang="scss" scoped>
.warp {
  min-height: 100%;
  width: 100%;
  background-color: #fff;
  background-image: url(../../assets/imgs/login_bc.png);
  background-size: 100% 100%;
  overflow: hidden;

  .card-warp {
    width: 500px;
    position: absolute;
    top: 18%;
    left: 15%;
    z-index: 1000;
    box-shadow: 0 0 12px 0 #aae5fb;
    padding: 0 80px;
    box-sizing: border-box;

    .title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      margin: 0;
      padding: 30px 0 50px 0;
      color: rgba(0, 0, 0, 0.45);
    }

    .captcha-img {
      width: 100px;
      height: 30px;
    }

    .check-box {
      transform: translateY(-5px);
    }

    .login-btn {
      width: 100%;
      margin: 10px 0 60px 0;
    }
  }
}

// 自动填充样式
:deep(input:-internal-autofill-previewed) {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

:deep(input:-internal-autofill-selected) {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
</style>
